<template>
  <div class="show-page" v-if="showPage">
	  <image src="../static/icon/beijing@3x.png" class="img" mode=""></image>
  </div>
  <div class="home-page" v-else>
    <div class="page-head">
      <div class="page-tab">
        <scroll-view class="nav">
          <view class="flex tab-color">
            <view
              v-for="(item,index) of tabList"
              :key="index"
              class="cu-item flex-sub"
              :class="[index ===submitInfoList.tab &&'text-white cur']"
              :data-id="index"
              @tap="tabSelect"
            >
              {{ item.title }}
            </view>
          </view>
        </scroll-view>
        <div
          v-for="(item,index) of contentList"
		  :key="index"
          class="page-card"
        >
          <div class="card-title">
            {{ item.title }}
          </div>
          <div class="card-content">
            <div
              v-for="(its,ins) of item.select"
			  :key="ins"
              class="card-select"
            >
              <div class="home-page-title">
                <div>{{ its.seTitle }}</div>
                <!--              选择时间-->
                <picker
                  v-if="its.type !== 'none'"
                  :mode="its.type"
                  :value="searchList[its.value]"
                  start="2000-09-01"
                  end="2040-09-01"
                  @change="DataChange(its,$event)"
                >
                  <div class="select-content">
                    <view class="picker">
                      {{ submitInfoList[its.value] }}
                    </view>
                    <img
                    v-if="submitInfoList[its.value].indexOf('选择') !== -1"
                      src="@/static/icon/Icons_Tint Color_Black@3x.png"
                      class="select-icon"
                    >
                    <img
                        v-if="submitInfoList[its.value].indexOf('选择') === -1"
                        src="@/static/icon/cha@3x.png"
                        class="select-icon-cha"
                        @click.stop="handleClearContent(its)"
                    >
                  </div>
                </picker>
                <!--              普通选择-->
                <picker
                  v-if="its.type === 'none'"
                  :value="submitInfoList[item.key]"
                  :range="item.content"
                  @change="pickerChange(item,$event)"
                  @columnchange="handleChangeSelect($event,item)"
                >
                  <div class="select-content-type">
                    <view class="picker hidden">
                      {{ submitInfoList[item.key] }}
                    </view>
                    <img
                      v-if="submitInfoList[item.key].indexOf('选择') !== -1"
                      src="@/static/icon/Icons_Tint Color_Black@3x.png"
                      class="select-icon"
                    >
                    <img
                        v-if="submitInfoList[item.key].indexOf('选择') === -1"
                        src="@/static/icon/cha@3x.png"
                        class="select-icon-cha"
                        @click.stop="handleClearContent(item)"
                    >
                  </div>
                </picker>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <tabber :submit-list="submitInfoList" />
  </div>
</template>

<script>
import tabber from "@/components/tabber";
export default {
	name: "HomePage",
	components: {
		tabber
	},
	data() {
	  return {
		  showPage: true,
			submitInfoList: {
        tab: 0,
				type: "请选择型",
				subclass: "请先选择类",
				groups:"请选择组",
				subtype:"请先选择型",
				category:"请选择门类",
				department: "请选择司局",
				clazz: "请选择类",
				effective: "请选择有效性",
        implement_date_start: "请选择开始时间",
        implement_date_end: "请选择结束时间",
        release_date_start: '请选择开始时间',
        release_date_end: '请选择结束时间',
				under_centralized: "请先选择司局",
				subgroup: "请先选择组",
				obj: "请先选择亚组"
			},
	    searchList:{
				acStartTime:"请选择开始时间",
				acEndTime:"请选择结束时间",
				tellStartTime:"请选择开始时间",
				tellEndTime: "请选择结束时间",
				Bureau: 0,
				putUnder:0,
				Effectiveness: 0
			},
			tabList:[
				{title:"基本情况"},
				{title:"分类情况"},
				{title:"分型"},
				{title:"对象"}
			],
			contentList:[],
			cardList:[
				{title:"实施日期",select:[
					{seTitle: "从",value:"implement_date_start",type:"date"},
					{seTitle: "到",value:"implement_date_end",type:"date"},
				]
				},
				{title:"发布日期",select:[
					{seTitle: "从",value:"release_date_start",type:"date"},
					{seTitle: "到",value:"release_date_end",type:"date"},
				]
				},
				{title:"司局",key: "department",content:[] ,select:[
					{seTitle: "",value:"Bureau",type:"none"},
				]
				},
				{title:"归口",key: "under_centralized",content:['请先选择上一级'],select:[
					{seTitle: "",value:"putUnder",type:"none"},
				]
				},
				{title:"有效性",key: "effective",content: [],select:[
					{seTitle: "",value:"Effectiveness",type:"none"},
				]
				},
			],
			typeList:[
				{title:"大类",key: "clazz",content: [],select:[
					{seTitle: "",value:"Bureau",type:"none"},
				]
				},
				{title:"亚类",key: "subclass",content: ['请先选择上一级'],select:[
					{seTitle: "",value:"Bureau",type:"none"},
				]
				},
				{title:"分组",key: "groups",content: ['请先选择上一级'],select:[
					{seTitle: "",value:"putUnder",type:"none"},
				]
				},
				{title:"国民经济门类",key: "category",content: [],select:[
					{seTitle: "",value:"Effectiveness",type:"none"},
				]
				},
			],
			classList:[
				{title:"型",key: "type",content: [],select:[
					{seTitle: "",value:"Bureau",type:"none"},
				]
				},
				{title:"亚型",key: "subtype",content: ['请先选择上一级'],select:[
					{seTitle: "",value:"Bureau",type:"none"},
				]
				},
			],
			objectList:[
				{title:"亚组",key: "subgroup",content: [],select:[
					{seTitle: "",value:"Bureau",type:"none"},
				]
				},
				{title:"对象",key: "obj",content: ['请先选择上一级'],select:[
					{seTitle: "",value:"Bureau",type:"none"},
				]
				},
			],
		};
	},
	onLoad(option) {
		if(Object.keys(option).length) {
			this.showPage = false
		}
	setTimeout(()=>{
		this.showPage = false
	},2000)
    if(option.indexBook !== undefined){
      this.submitInfoList.tab = {
        '0': 0,
        '1': 1,
        '2': 2,
        '3': 3,
        '4': 0,
        '5': 1
      }[option.indexBook]
    }
	  this.handleGetSelectContent();
		this.contentList =JSON.parse(JSON.stringify([ this.cardList,this.typeList,this.classList,this.objectList][this.submitInfoList.tab]));
	},
	methods: {
    handleClearContent(data){
      if(data.seTitle === '从'){
        this.submitInfoList[data.value] = '请选择开始时间'
        return
      }
      if(data.seTitle === '到'){
        this.submitInfoList[data.value] = '请选择结束时间'
        return
      }
      this.submitInfoList[data.key] = '请选择' + data.title
    },
		handleIsNull(item){
			if(item.content.length === 0){
				wx.showToast({
					title: "请先选择上一级",
					icon: "none"
				});
				return;
			}
		},
		// 获取下拉内容
		handleGetSelectContent(){
			this.$api.userPortalConfigByColumn({
			}).then((res) => {
        // 司局
        this.cardList[2].content = res.data.department.map((item) => {
          return item.department;
        });
		// // 门类
		this.typeList[0].content = res.data.clazz.map((item) => {
			return item.clazz;
		});
		this.typeList[3].content = res.data.category.map((item) => {
			return item;
		});
		// 有效性
		this.cardList[4].content = res.data.effective;
		// 亚组
		this.objectList[0].content = res.data.subgroup.map((item) => {
			return item.subgroup;
		});
		// 型
		this.classList[0].content = res.data.type.map((item) => {
			return item.type;
		});
        this.contentList = [this.cardList,this.typeList,this.classList,this.objectList][this.submitInfoList.tab]
			});
		},
	  // tab切换
		tabSelect(e) {
			this.submitInfoList.tab = e.currentTarget.dataset.id;
			this.contentList =JSON.parse(JSON.stringify( [ this.cardList,this.typeList,this.classList,this.objectList][this.submitInfoList.tab]));
		},
		// 时间选择
		DataChange(data,e) {
			this.submitInfoList[data.value] = e.detail.value;
		},
		// 普通选择
		pickerChange(data,e) {
			this.submitInfoList[data.key] = data.content[Number(e.detail.value)];
			if(data.key === "type"){
				this.$api.userPortalGetSubType({
					type: this.submitInfoList.type
				}).then((res) => {
					this.submitInfoList.subclass = "请选择";
					this.classList[1].content = res.data;
				});
			}
			if(data.key === "subclass"){
				this.$api.userPortalGetGroup({
					clazz: this.submitInfoList.clazz,
					subclass: this.submitInfoList.subclass
				}).then((res) => {
					this.submitInfoList.groups = "请选择";
					this.typeList[2].content = res.data;
				});
			}
			if(data.key === "clazz"){
				this.$api.userPortalGetSubClass({
					clazz: this.submitInfoList.clazz
				}).then((res) => {
					this.typeList[1].content = res.data;
				});
			}
			if(data.key === "type"){
				this.submitInfoList.subtype = "请选择";
			}
			if(data === "groups"){
				this.submitInfoList.groups = this.groupsList[Number(e.detail.value)];
			}
			if(data === "subclass"){
				this.submitInfoList.subclass = this.subclassList[Number(e.detail.value)];
				this.$api.userPortalGetGroup({
					subclass: this.submitInfoList.subclass,
					clazz: this.submitInfoList.clazz
				}).then((res) => {
					this.submitInfoList.groups = "请选择";
					this.groupsList = res.data;
				});
			}
			if(data.key === "department"){
				this.$api.userPortalGetUnderCentralized({
					[data.key]: this.submitInfoList.department
				}).then((res) => {
					this.cardList[3].content = res.data;
					this.submitInfoList.under_centralized = "请选择";
				});
			}
			if(data.key === "subgroup"){
				this.$api.userPortalGetObj({
					[data.key]: this.submitInfoList.subgroup
				}).then((res) => {
					// this.$set(this.objectList[1],"content",res.data);
					this.objectList[1].content = res.data
					this.submitInfoList.obj = "请选择";
				});
			}
			this.submitInfoList[data.key] = data.content[Number(e.detail.value)];
      this.contentList = [this.cardList,this.typeList,this.classList,this.objectList][this.submitInfoList.tab]
		},
	}
};
</script>

<style scoped lang="scss">
.hidden {
  white-space: nowrap;
  overflow-x: scroll;
}
.show-page {
	height: 100vh;
	.img {
		width: 100%;
		height: 100%;
		background-color: #DFEFD8;
	}
}
.home-page {
  min-height: 100%;
  .page-head {
    z-index: -1;
    background-image: linear-gradient(#6ACC40,#59AC35) ;
    height: 300rpx;
    .page-tab {
      background-color:transparent;
      position: absolute;
      min-height: 300px;
      padding:0 24rpx 215rpx 24rpx;
      width: 100%;
    }
    .tab-color {
      font-weight: 500;
      background-color:transparent;
      color: #FFFFFF;
      font-size: 40rpx;
    }
    .page-card {
      display: flex;
      background-color: #FFFFFF;
      flex-direction: column;
      margin-top: 24rpx;
      border-radius: 16rpx;
      width: 100%;
      height: 320rpx;
      .card-title {
        height: 100rpx;
        display: flex;
        text-align: left;
        align-items: center;
        font-size: 40rpx;
        color: #303030;
        padding: 24rpx;
        font-weight: 700;
        border-radius: 16rpx 16rpx 0 0;
        border-bottom: 4rpx #EEEEEE solid;
      }
    }
    .card-content {
      align-items: center;
      height: 100%;
      border-radius: 0 0 16rpx 16rpx;
      padding: 32rpx 24rpx;
      font-size: 40rpx;
      font-weight: 700;
      display: flex;
      text-align: left;
      flex-direction: column;
      justify-content: space-between;
      .select-icon {
        width: 12rpx;
        height: 22rpx;
      }
      .select-icon-cha {
        width: 20rpx;
        height: 20rpx;
      }
      .select-content {
        margin-left: 20rpx;
        background-color: #F7F8FA;
        padding: 8rpx 24rpx;
        border-radius: 36rpx;
        display: flex;
        align-items: center;
        min-width: 580rpx;
        justify-content: space-between;
      }
      .select-content-type {
        margin-top: 30rpx;
        width: 650rpx;
        background-color: #F7F8FA;
        border: rgba(89,172,53,1) 2rpx solid;
        display: flex;
        align-items: center;
        border-radius: 8rpx;
        justify-content: space-between;
        padding: 24rpx;
      }
    }
    .card-select {
      display: flex;
      align-items: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      justify-content: space-between;
      .home-page-title {
        align-items: center;
        display: flex;
        justify-content: space-between;
        padding: 12rpx
      }
    }
  }
}

</style>
